<!-- 用料清单弹框 -->
<template>
	<el-dialog v-model="isVisible" width="1200" :close-on-click-modal="false" class="comm-dialog">
		<template #header>
			<span class="title">用料清单</span>
		</template>
		<div class="dialog-content">
			<!-- 用料清单表格 -->
			<div v-loading="loading" element-loading-text="加载中..." class="material-table">
				<el-table :data="materialData.glmPurchaseMaterialDetailInfoVo" border height="440" tooltip-effect="light" :header-cell-style="{ 'text-align': 'center' }">
					<el-table-column type="index" label="序号" width="60" align="center" />
					<el-table-column prop="materialId" label="子项物料编码" align="left" min-width="100" show-overflow-tooltip />
					<el-table-column prop="materialName" label="子项物料名称" min-width="150" show-overflow-tooltip />
					<el-table-column prop="materialSpecification" label="子项规格型号" min-width="150" />
					<el-table-column prop="materialColor" label="颜色" align="left" show-overflow-tooltip />
					<el-table-column prop="materialSize" label="尺码" />
					<el-table-column prop="mtoNo" min-width="150" label="计划跟踪号" align="left" />
					<el-table-column prop="unit" label="子项单位" />
					<el-table-column label="应收数量" align="right" min-width="100">
						<template #default="{ row }">
							<span>{{ format_with_array(strToFixed(row.mustQty, 3)) }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="pickedQty" label="实收数量" align="right" min-width="100">
						<template #default="{ row }">
							<span>{{ format_with_array(strToFixed(row.pickedQty, 3)) }}</span>
						</template>
					</el-table-column>
					<el-table-column label="差额" align="right" min-width="100">
						<template #default="{ row }">
							<span>{{ row.mustQty - row.pickedQty > 0 ? format_with_array(strToFixed(row.mustQty - row.pickedQty, 3)) : '' }}</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
	</el-dialog>
</template>

<script setup>
import { getMaterialAPI } from '@/api/order.js'

const emit = defineEmits()
const props = defineProps({
	isShow: {
		type: Boolean,
		required: true
	},
	materialParams: {
		type: Object,
		default() {
			return {
				purchaseOrderNo: '',
				orderEntrySeq: '',
				styleName: ''
			}
		}
	}
})
const isVisible = computed({
	get() {
		return props.isShow
	},
	set() {
		emit('update:isShow', false)
	}
})

const loading = ref(false)
const materialData = ref({}) // 用料清单数据
async function getInfo() {
	loading.value = true
	const { data: res } = await getMaterialAPI(props.materialParams)
	loading.value = false
	materialData.value = res
}
getInfo()
</script>

<style lang="scss" scoped></style>
